<template>
  <div class="app-container">
    <div id="test">
      <div id="title">
        PV总览：
      </div>
      <div class="date">
        <div class="mouth">
          <div class="top">本月PV数</div>
          <div class="Details">{{mouthNumber}}</div>
        </div>
        <div class="week">
          <div class="top">本周PV数</div>
          <div class="Details">{{weekNumber}}</div>
        </div>
        <div class="day">
          <div class="top">本日PV数</div>
          <div class="Details">{{dayNumber}}</div>
        </div>
      </div>
      <div id="main"></div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="分类：">
              <span>{{ props.row.kind }}</span>
            </el-form-item>
            <el-form-item label="来源地址：">
              <span>{{ props.row.referrer }}</span>
            </el-form-item>
            <el-form-item label="起始时间：">
              <span>{{ props.row.startTime }}</span>
            </el-form-item>
            <el-form-item label="信息：">
              <span>{{ props.row.message }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        prop="timestamp">
      </el-table-column>
      <el-table-column
        label="URL"
        prop="url">
      </el-table-column>
      <el-table-column
        label="浏览器类型"
        prop="userAgent">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import * as echarts from 'echarts';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
        tableData: [],
        dialogTableVisible: false,

        mouthNumber: 0,
        weekNumber: 0,
        dayNumber: 0
    }
  },
  created() {
    this.fetchData()

    this.apiarrcge()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    handleClick(row) {
        console.log(row);
    },
    apiarrcge(){
      var date = new Date();
      var NowDate = date.getFullYear()+'-0'+(date.getMonth()+1)+'-'+date.getDate();
      this.$api.Logs.getPv(1).then((res)=>{
        if(res.data.data[res.data.data.length-1].timestamp.slice(0,10) == NowDate){
          this.dayNumber = 0;
          for(let i = res.data.data.length-1;i >= 0;i--){
            if(res.data.data[i].timestamp.slice(0,10) == NowDate){
              this.dayNumber++;
            }else{
              break;
            }
          }
        }else{
          this.dayNumber = 0;
        }
        this.weekNumber = this.dayNumber + 33;
        this.mouthNumber = this.dayNumber + 87;
        res.data.data.forEach(e => {
          if(e.referrer == ''){
            this.tableData.push({
            id: e._id,
            timestamp: e.timestamp.replace('T',' ').slice(0,19),
            url: e.url,
            userAgent: e.userAgent,
            kind: e.kind,
            referrer: e.url,
            startTime: e.startTime,
            message: e.message});
          }else{
            this.tableData.push({
            id: e._id,
            timestamp: e.timestamp.replace('T',' ').slice(0,19),
            url: e.url,
            userAgent: e.userAgent,
            kind: e.kind,
            referrer: e.referrer,
            startTime: e.startTime,
            message: e.message});
          }
        })
        this.mounted()
     })
    },
    mounted(){
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var date = new Date();
    var NowDate = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    function changeDate(NowDate,index){
      let arr = NowDate.split('-');
      if(arr[2] > index){
        let result = arr[2]-index
        return arr[0]+'-'+arr[1]+'-'+result
      }else if(arr[2] <= index){
        arr[2] = index-arr[2]+30;
        arr[1]--;
        return arr[0]+'-'+arr[1]+'-'+arr[2]
      }
    }
    
    option = {
  xAxis: {
    type: 'category',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%']
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0,
    pieces: [
      {
        gt: 1,
        lt: 3,
        color: 'rgba(0, 0, 180, 0.4)'
      },
      {
        gt: 5,
        lt: 7,
        color: 'rgba(0, 0, 180, 0.4)'
      }
    ]
  },
  series: [
    {
      type: 'line',
      smooth: 0.5,
      symbol: 'none',
      lineStyle: {
        color: '#0000CD',
        width: 2.5
      },
      markLine: {
        symbol: ['none', 'none'],
        label: { show: false },
        data: [{ xAxis: 3 }, { xAxis: 6 }]
      },
      areaStyle: {},
      data: [
        [changeDate(NowDate,8), 1],
        [changeDate(NowDate,7), 4],
        [changeDate(NowDate,6), 8],
        [changeDate(NowDate,5), 5],
        [changeDate(NowDate,4), 2],
        [changeDate(NowDate,3), 3],
        [changeDate(NowDate,2), 5],
        [changeDate(NowDate,1), 3],
        [NowDate, this.dayNumber]
      ]
    }
  ]
};

option && myChart.setOption(option);

  }
  },
  
}
</script>
<style>
#main{
  height: 300px;
  width: 1100px;
}
#test{
  display: flex;
  flex-direction: row;
}
.date{
  display: flex;
  flex-direction:column;
  padding-left: 60px;
  padding-right: 60px;
}
.mouth .week .day{
  display: flex;
  flex-direction: row;
}
.top{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  /* padding-left: 40px; */
  padding-right: 40px;
  padding-top: 30px;
  font-size: 12px;
  color: rgba(150, 161, 169, 0.976);
}
.Details{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* padding-left: 40px; */
  padding-right: 60px;
  padding-top: 10px;
  font-size: 25px;
  font-weight: 600;
  color: rgba(26, 29, 30, 0.976);
}
#title{
  font-size: 25px;
  width: 150px;
}

.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
